5<template>
  <div class="albumdetails">
    <!-- 专辑信息 -->
    <div class="base-info">
      <!-- 专辑图片 -->
      <div class="left">
        <img class="image" :src="musicInfo.pic" />
      </div>
      <!-- 专辑详细信息 -->
      <div class="right">
        <h3>
          <span
            class="tip"
            :style="{
              color: themeColor,
              border: `0.0625rem solid ${themeColor}`
            }"
            >单曲</span
          >
          <div class="title-box">
            {{ musicInfo.name }}
            <p class="subtit">{{ musicInfo.alia }}</p>
          </div>
          <i
            class="iconfont icon-MV24"
            :style="{ color: themeColor }"
            title="播放MV"
          ></i>
        </h3>
        <div class="right-item">
          <div class="item singer">
            歌手：<span
              style="color: #0c73c2"
              :title="musicInfo.song"
              @click="toSingerDetails(musicInfo.aliasId)"
              >{{ musicInfo.song }}</span
            >
            {{ musicInfo.song2 !== "" ? "/" : "" }}
            <span
              style="color: #0c73c2"
              :title="musicInfo.song2"
              @click="toSingerDetails(musicInfo.aliasId2)"
              >{{ musicInfo.song2 }}</span
            >
          </div>
          <div class="item zhuanji">
            所属专辑：<span
              style="color: #0c73c2"
              :title="musicInfo.album"
              @click="toAlbumDetails(musicInfo.albumId)"
              >{{ musicInfo.album }}</span
            >
          </div>
          <div class="item">
            发布时间：<span>{{ date | dateTime }}</span>
          </div>
        </div>
        <div class="right-btn">
          <el-button
            plain
            icon="el-icon-video-play"
            :style="{ background: themeColor }"
            title="播放"
            >播放</el-button
          >
          <el-button plain icon="el-icon-folder-add" title="收藏"
            >收藏</el-button
          >
          <el-button plain icon="iconfont icon-fenxiang" title="分享"
            >分享</el-button
          >
        </div>
        <!-- 歌词 -->
        <div class="right-text">
          <div class="jianjie" :class="{ isopen: isOpen === false }">
            <h5>歌词：</h5>
            <div>
              <p
                class="album-desc"
                v-for="(item, index) in formatText(lyric.lyric)"
                :key="index"
              >
                {{ item }}
              </p>
              <p v-if="lyric == ''">暂无歌词</p>
            </div>
          </div>
          <p class="open" v-if="textIndex > 6" @click="isOpen = !isOpen">
            <i
              :class="[
                { 'el-icon-arrow-down': isOpen === false },
                { 'el-icon-arrow-up': isOpen === true }
              ]"
            ></i
            >{{ isOpen == false ? "展开" : "收起" }}
          </p>
        </div>
      </div>
    </div>
    <!-- 评论列表 -->
    <div class="tiele" :style="{ 'border-color': themeColor }">
      <h3>
        评论<span>共{{ total }}条</span>
      </h3>
    </div>
    <!-- 音乐列表，评论列表 -->
    <div class="comment-box">
      <ch-commentlist
        ref="playlist"
        :comments="comments"
        :hotcomments="hotcomments"
        :total="total"
        :page="page"
        :commentType="commentType"
        :t="t"
        :limit="limit"
        @currentChange="currentChange"
      />
    </div>
  </div>
</template>
<script>
// import MusicList from "./components/musiclist";
// import CommentList from "./components/commentlist";
import {
  getplaylisSongdetail,
  getMusicLyric,
  getMusicComment
} from "@/api/music.js";
import CommentList from "./components/commentlist";
import { songDetail } from "@/utils/detail.js";
export default {
  name: "albumdetails",
  components: {
    // MusicList,
    "ch-commentlist": CommentList
  },
  props: {},
  data() {
    return {
      musicInfo: "",
      date: "",
      lyric: "", //歌词
      isOpen: false,
      comments: [], //最新评论
      hotcomments: [], // 热门评论
      total: 0, // 总数量
      t: 1, // 发布评论类型
      page: 1, // 页数
      limit: 40, // 每页数量
      commentType: 0, //评论类型
      textIndex: ""
      // briefDesc: false,
    };
  },
  computed: {
    themeColor() {
      return this.$store.state.themeColor;
    }
  },
  watch: {
    $route() {
      this.playlist = [];
      this.getAlbumdetails();
    }
  },
  created() {
    // 获取单曲
    this.getMusicDetails();
    // 获取歌词
    this.getMusicLyric();
    // 获取评论
    this.getMusicComment();
  },
  mounted() {},
  methods: {
    // 获取单曲
    async getMusicDetails() {
      this.showLoading();
      const { data } = await getplaylisSongdetail({
        ids: this.$route.query.id
      });
      if (data.code === 200) {
        this.closeLoading();
      }
      let song = new songDetail(data.songs);
      this.musicInfo = song;
      this.date = data.songs.publishTime;
      this.title();
    }, // 获取歌词
    async getMusicLyric() {
      const { data } = await getMusicLyric({
        id: this.$route.query.id
      });
      if (data.briefDesc !== null) {
        this.lyric = data.lrc;
      }
    },
    // 获取评论
    async getMusicComment() {
      this.showLoading();
      const data = await getMusicComment({
        id: this.$route.query.id,
        limit: this.limit,
        offset: (this.page - 1) * this.limit
      });
      if (data.status == 200) {
        this.closeLoading();
      }
      this.comments = data.data.comments;
      // if (data.data.hotComments !== '' ) {
      this.hotcomments = data.data.hotComments;
      // }
      this.total = data.data.total;
      this.$emit("total", data.data.total);
    }, // 分页
    currentChange(page) {
      this.page = page;
      // this.hotcomments = "";
      this.getMusicComment();
    },
    formatText(text) {
      if (text) {
        let newText = text.split("\n");
        let newlyric = [];
        this.textIndex = newText.length;
        newText.forEach(item => {
          let lyric = item.replace(/\[.*?\]/g, "");
          newlyric.push(lyric);
        });
        return newlyric;
      }
    },
    title() {
      let name = this.musicInfo.song2 !== "" ? "/" + this.musicInfo.song2 : "";
      let alia =
        this.musicInfo.alia !== "" ? "(" + this.musicInfo.alia + ")" : "";
      document.title = `${this.musicInfo.name}${alia} - ${this.musicInfo.song}${name} - 单曲  - 网抑云音乐`;
    }, // 跳转歌手详情
    toSingerDetails(id) {
      this.$router.push({
        path: "singerdetails",
        query: {
          id
        }
      });
    }, // 跳转专辑详情
    toAlbumDetails(id) {
      this.$router.push({
        path: "albumdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.albumdetails {
  .base-info {
    position: relative;
    width: 100%;
    // height: 18.125rem;
    display: flex;
    font-size: 1rem;
    // justify-content: space-between;
    // align-items: center;
    box-sizing: border-box;
    margin-bottom: 1.25rem;
    padding: 0.9375rem 0;
    .left {
      width: 14.28571rem;
      height: 100%;
      // height: 18.125rem;
      // line-height: 18.125rem;;
      padding-right: 2.5rem;
    }
    .image {
      // display: block;
      width: 100% !important;
    }
    .right {
      height: 100%;
      width: 80%;
      h3 {
        padding: 0.625rem 0;
        color: #000;
        font-weight: 700;
        span {
          padding: 0.125rem 0.625rem;
          border: 0.0625rem solid red;
          color: red;
          border-radius: 0.3125rem;
          font-weight: normal;
        }
        .title-box {
          display: inline-block;
          flex-direction: column;
          vertical-align: middle;
          margin-left: 0.3125rem;
          .subtit {
            color: #bababa;
            font-size: 14px;
          }
        }
        .icon-MV24 {
          font-size: 1.75rem;
          font-weight: normal;
          vertical-align: middle;
          margin-left: 0.5rem;
          color: red;
          cursor: pointer;
        }
      }
      .right-item {
        padding: 0.625rem 0;
        .item {
          padding: 0.3125rem 0;
          color: #666;
        }
        .singer span:hover {
          text-decoration: underline;
          cursor: pointer;
        }
        .zhuanji span:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
      .right-btn {
        display: flex;
        padding: 0.625rem 0;
        margin: auto 0;
      }
      /deep/.el-button {
        // display: flex;
        align-items: center;
        width: 12.1875rem;
        height: 3.125rem;
        .el-icon-video-play {
          font-size: 1.375rem;
          vertical-align: middle;
        }
        .el-icon-folder-add {
          font-size: 1.375rem;
          vertical-align: middle;
        }
        .icon-fenxiang {
          font-size: 1.375rem;
          vertical-align: middle;
        }
      }
      .el-button:nth-child(1) {
        background: red;
        color: #fff;
        border: 0;
        outline: none;
      }
    }
  }
  .right-text {
    width: 100%;
    .jianjie {
      //   display: -webkit-box;
      //   -webkit-box-orient: vertical;
      //   -webkit-line-clamp: 2;
      //   overflow: hidden;
      color: #666;
      h5 {
        font-size: 1rem;
      }
      .album-desc {
        text-indent: 2em;
        line-height: 1.875rem;
        margin-top: 0.5rem;
      }
    }
    .open {
      float: right;
      color: #0c73c2;
      font-size: 0.875rem;
      padding-right: 0.625rem;
      cursor: pointer;
    }
    .isopen {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 6;
      overflow: hidden;
    }
  }
  .bottom-box {
    margin-top: 1.25rem;
    margin-bottom: 7.5rem;
  }
  .tiele {
    padding: 0.625rem 0;
    border-bottom: 0.125rem solid red;
    font-size: 1.375rem;
    color: #000;
    font-weight: 700;

    span {
      font-size: 1rem;
      margin-left: 1.875rem;
      color: #666666;
    }
  }
}
</style>
